<template>
  <mu-h-box :class="editPermission ? '' : ''" style="height: 40px;">
    <mu-input
      v-if="copiedRecord._editing"
      ref="getFocus"
      size="1"
      type="text"
      style="margin: 4px"
      placeholder="请输入内容"
      :value="getValue()"
      @blur="save($event)"
      @enterkey="save($event)"
    />
    <template v-else>
      <div v-if="editPermission" class="record-clickable" @dblclick="editing">
        <span class="mu-text-ellipsis">
          {{ copiedRecord[attribute] }}
        </span>
        <span v-if="showIcon" style="color:#008CD6">
          （双击编辑）
          <span class="ipm-iconedit" />
        </span>
      </div>
      <div v-else class="mu-text-ellipsis">
        <span
          class="mu-text-ellipsis"
          style="display: inline-block;width: 100%;"
        >
          {{ copiedRecord[attribute] }}
        </span>
      </div>
    </template>
  </mu-h-box>
</template>
<script>
  import cloneDeep from 'lodash.clonedeep'
  import Vue from 'vue'
  import { notify } from 'mussel'

  export default {
    name: 'DblclickEditableText',
    props: {
      record: {
        type: Object,
        default: () => {
          return {}
        }
      },
      attribute: {
        type: String,
        default: ''
      },
      editPermission: {
        type: Boolean,
        default: false
      },
      excludeExtension: {
        type: Boolean,
        default: true
      },
      showIcon: {
        type: Boolean,
        default: false
      },
      canEmpty: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        copiedRecord: {}
      }
    },
    watch: {
      record: {
        handler (newV, oldV) {
          this.copiedRecord = cloneDeep(newV)
        },
        deep: true
      }
    },
    mounted () {
      this.copiedRecord = cloneDeep(this.record)
    },
    methods: {
      getValue () {
        const lastIndexOfDot = this.excludeExtension
          ? this.copiedRecord[this.attribute].lastIndexOf('.')
          : -1
        return this.excludeExtension
          ? this.copiedRecord[this.attribute].substr(
            0,
            lastIndexOfDot > -1
              ? lastIndexOfDot
              : this.copiedRecord[this.attribute].length
          )
          : this.copiedRecord[this.attribute]
      },
      editing () {
        Vue.set(this.copiedRecord, '_editing', true)
        this.timer = setTimeout(() => {
          this.$refs.getFocus.$el.focus()
        }, 100)
      },
      save ($event) {
        const target = Object($event.$el).parentNode || $event.target.parentNode
        let value = target.querySelector('input').value
        const originalValue = this.copiedRecord[this.attribute] || ''
        const lastIndexOfDot =
          this.excludeExtension && originalValue.lastIndexOf('.') > -1
            ? originalValue.lastIndexOf('.')
            : originalValue.length

        value = value.trim()
        if (!value && !this.canEmpty) {
          notify('error', '不能为空 !')
          value = originalValue.substr(0, lastIndexOfDot)
        }
        if (!value && this.canEmpty) {
          value = ''
        }
        const o = originalValue.substr(lastIndexOfDot, originalValue.length)
        value = value + o
        if (value !== originalValue) {
          this.$emit('save', value)
        }
        this.copiedRecord._editing = false
      }
    }
  }
</script>
<style lang="postcss" scoped>
  .record-clickable {
    cursor: pointer;
    width: calc(100% - 8px);
    height: 32px;
    line-height: 32px;
    margin: 4px;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &:hover {
      color: #008cd6;
      border: 1px dashed #008cd6;
    }
  }
</style>
